doc(DockView): update layout sample code#8019
Merged
Merged
Conversation
Contributor
Reviewer's guide (collapsed on small PRs)Reviewer's GuideUpdates DockView layout sample JSON configurations to match the new DockView API schema and to provide stable tab keys in the sample code. File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The layout JSON constants are very long single-line strings, which makes them hard to read and maintain; consider formatting them as multi-line JSON (or building them as C# objects and serializing) to improve clarity and reduce the chance of subtle mistakes.
- The new schema introduces both
layout.panelsand a top-levelpanelsarray; please double-check whether the empty top-levelpanelsis required by the API or if it can be removed to avoid confusion about whichpanelscollection is actually used.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The layout JSON constants are very long single-line strings, which makes them hard to read and maintain; consider formatting them as multi-line JSON (or building them as C# objects and serializing) to improve clarity and reduce the chance of subtle mistakes.
- The new schema introduces both `layout.panels` and a top-level `panels` array; please double-check whether the empty top-level `panels` is required by the API or if it can be removed to avoid confusion about which `panels` collection is actually used.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the DockViewV2 custom layout sample to match the newer BootstrapBlazor.DockView package layout configuration format.
Changes:
- Updates
BootstrapBlazor.DockViewfrom10.0.9to10.0.13. - Wraps saved layout JSON under a top-level
layoutproperty and adds panel key metadata. - Adjusts sample layout configs used by the DockViewV2 layout toggle demo.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj |
Updates the DockView package dependency. |
src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor.cs |
Updates hard-coded DockViewV2 layout sample JSON configs. |
Comments suppressed due to low confidence (1)
src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewLayout.razor.cs:43
- The
params.keyvalues here are shifted relative to the declaredDockViewComponentkeys (标签一/tab1,标签二/tab2,标签三/tab3). Because these keys identify which component content should be restored into each panel, this layout can show the wrong content under each tab title. Please update the keys so each panel's title uses the matching component key.
const string LayoutConfig3 = """{"layout":{"grid":{"root":{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_50123566"],"activeView":"bb_50123566","id":"2"},"size":300},{"type":"leaf","data":{"views":["bb_34309365","bb_24575431"],"activeView":"bb_24575431","id":"1"},"size":301}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_34309365":{"id":"bb_34309365","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab1","isLock":false,"type":"component","id":"bb_34309365","additionalAttributes":null},"title":"标签二"},"bb_24575431":{"id":"bb_24575431","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab2","isLock":false,"type":"component","id":"bb_24575431","additionalAttributes":null},"title":"标签三"},"bb_50123566":{"id":"bb_50123566","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab3","isLock":false,"type":"component","id":"bb_50123566","additionalAttributes":null},"title":"标签一"}},"activeGroup":"1"},"panels":[]}""";
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const string LayoutConfig1 = """{"layout":{"grid":{"root":{"type":"branch","data":[{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_5893789"],"activeView":"bb_5893789","id":"0"},"size":364},{"type":"leaf","data":{"views":["bb_11251481"],"activeView":"bb_11251481","id":"1"},"size":364},{"type":"leaf","data":{"views":["bb_39754773"],"activeView":"bb_39754773","id":"2"},"size":364}],"size":601}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_5893789":{"id":"bb_5893789","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab1","isLock":false,"type":"component","id":"bb_5893789","additionalAttributes":null},"title":"标签一"},"bb_11251481":{"id":"bb_11251481","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab2","isLock":false,"type":"component","id":"bb_11251481","additionalAttributes":null},"title":"标签二"},"bb_39754773":{"id":"bb_39754773","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab3","isLock":false,"type":"component","id":"bb_39754773","additionalAttributes":null},"title":"标签三"}},"activeGroup":"1"},"panels":[]}"""; | ||
|
|
||
| const string LayoutConfig2 = """{"grid":{"root":{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_50123566"],"activeView":"bb_50123566","id":"2"},"size":200},{"type":"leaf","data":{"views":["bb_34309365"],"activeView":"bb_34309365","id":"1"},"size":200},{"type":"leaf","data":{"views":["bb_24575431"],"activeView":"bb_24575431","id":"0"},"size":201}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_24575431":{"id":"bb_24575431","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_24575431","additionalAttributes":null},"title":"标签三"},"bb_34309365":{"id":"bb_34309365","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_34309365","additionalAttributes":null},"title":"标签二"},"bb_50123566":{"id":"bb_50123566","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":null,"isLock":false,"type":"component","id":"bb_50123566","additionalAttributes":null},"title":"标签一"}},"activeGroup":"2"}"""; | ||
| const string LayoutConfig2 = """{"layout":{"grid":{"root":{"type":"branch","data":[{"type":"leaf","data":{"views":["bb_50123566"],"activeView":"bb_50123566","id":"2"},"size":200},{"type":"leaf","data":{"views":["bb_34309365"],"activeView":"bb_34309365","id":"1"},"size":200},{"type":"leaf","data":{"views":["bb_24575431"],"activeView":"bb_24575431","id":"0"},"size":201}],"size":1092},"width":1092,"height":601,"orientation":"VERTICAL"},"panels":{"bb_24575431":{"id":"bb_24575431","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签三","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab1","isLock":false,"type":"component","id":"bb_24575431","additionalAttributes":null},"title":"标签三"},"bb_34309365":{"id":"bb_34309365","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签二","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab2","isLock":false,"type":"component","id":"bb_34309365","additionalAttributes":null},"title":"标签二"},"bb_50123566":{"id":"bb_50123566","contentComponent":"component","tabComponent":"component","params":{"componentName":"component","title":"标签一","titleWidth":null,"titleClass":null,"class":null,"visible":true,"showClose":true,"width":null,"height":null,"key":"tab3","isLock":false,"type":"component","id":"bb_50123566","additionalAttributes":null},"title":"标签一"}},"activeGroup":"2"},"panels":[]}"""; |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8019 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 766 766
Lines 34123 34123
Branches 4692 4692
=========================================
Hits 34123 34123
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #8018
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Update DockView layout sample configuration to reflect the new layout schema and keyed tabs.
Bug Fixes:
Enhancements: